<template>
  <div class="wrap" >
    <el-container>
      <el-header class="title-word" style="margin-top: 10px ">创建客户产品</el-header>
      <el-main>
        <el-form ref="cpstorageForm" :model="cpstorageForm" :rules="rules"  label-width="120px" style="margin-left:20%;margin-right:25%">
          <el-form-item label="产品名称" prop="productName" style="width: 100%;">
            <el-input v-model="cpstorageForm.productName" placeholder="请输入产品名称"  prop="productName"></el-input>
          </el-form-item>
          <el-form-item label="产品品牌" prop="band" style="width: 100%;">
            <el-input v-model="cpstorageForm.band" placeholder="请输入产品品牌"  prop="band"></el-input>
          </el-form-item>
          <el-form-item label="产品规格"  prop="spec" style="width: 100%;">
            <el-input placeholder="请输入产品规格" v-model="cpstorageForm.spec" prop="spec"></el-input>
          </el-form-item>
          <el-form-item label="计量单位"  prop="unit" style="width: 100%;">
            <el-input v-model="cpstorageForm.unit" placeholder="请输入计量单位"  prop="unit"></el-input>
          </el-form-item>
          <el-form-item label="产品单价"  prop="price" style="width: 100%;">
            <el-input v-model="cpstorageForm.price" placeholder="请输入产品单价"  prop="price" @input="limitInput($event,'price','cpstorageForm')"></el-input>
          </el-form-item>
          <el-form-item label="存储数量"  prop="amount" style="width: 100%;">
            <el-input v-model="cpstorageForm.amount" placeholder="请输入存储数量，若无请填“0”"  prop="amount" @input="limitInput($event,'amount','cpstorageForm')"></el-input>
          </el-form-item>
        </el-form>
        <!--<div>上传产品图片(请先填写好产品名称，图片请用jpg格式)-->
          <!--<el-upload-->
            <!--class="avatar-uploader"-->
            <!--:show-file-list="false"-->
            <!--:data="name"-->
            <!--action="/hnhyscms_ws/cpstorage/importpic"-->
            <!--v-loading="loading"-->
            <!--:on-success="handleAvatarSuccess"-->
            <!--:before-upload="beforeAvatarUpload">-->
            <!--<img v-if="imageUrl" :src="imageUrl" class="avatar">-->
            <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
          <!--</el-upload>-->
        <!--</div>-->
        <el-button type="primary" @click="onSubmit('cpstorageForm')">立即创建</el-button>
        <el-button  @click="goback">取消</el-button>
      </el-main>
    </el-container>
  </div>
</template>

<script>
    export default {
      name: "createcpstorage",
      data() {
        return {
          imageUrl: '',
          name:{productName:''},
          loading:false,
          dialogVisible: false,
          cpstorageForm: {
            productName: '',
            band: '',
            spec: '',
            unit: '',
            price: '',
            amount: '',
          },
          rules: {
            productName: [
              {required: true, message: '请输入产品名称', trigger: 'blur'},
            ],
            band: [
              {required: true, message: '请输入产品品牌', trigger: 'blur'},
            ],
            spec: [
              {required: true, message: '请输入产品规格', trigger: 'blur'},
            ],
            unit: [
              {required: true, message: '请输入计量单位', trigger: 'blur'},
            ],
            price: [
              {required: true, message: '请输入产品单价', trigger: 'blur'},
            ],
            amount: [
              {required: true, message: '请输入存储数量', trigger: 'blur'},
            ]
          }
        };
      },
      methods: {
        /**
         * @param {string} value - 输入的值
         * @param {string} name - 匹配的对象属性 [mkPrice | slPrice]
         */
        limitInput(value, name,formName) {
          this[formName][name] =
            ("" + value) // 第一步：转成字符串
              .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
              .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
              .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
              .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.loading=false
          this.$message.success("上传成功")
        },
        beforeAvatarUpload(file) {
          this.name.productName=this.cpstorageForm.productName

          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传产品图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传产品图片大小不能超过 2MB!');
          }
          if(isLt2M && isJPG){
            this.loading=true
          }
          return isJPG && isLt2M;
        },

        onSubmit(FormName) {
          this.$refs[FormName].validate((valid) => {
            if (valid) {
              let params={
                "productName":this.cpstorageForm.productName,
                "band":this.cpstorageForm.band,
                "spec":this.cpstorageForm.spec,
                "unit":this.cpstorageForm.unit,
                "price":this.cpstorageForm.price,
                "amount":this.cpstorageForm.amount
              }
              this.$http.post("/hnhyscms_ws/cpstorage/addProducts",params,{emulateJSON:true}).then(
                success=>{})
              this.$confirm('创建成功')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
              this.$router.go(-1)
            } else {
              return false;
            }
          });
        },
        goback() {
          this.$router.go(-1)
        },

      }
    }
</script>

<style scoped>
  .title-word {
    font-size: 30px;
    line-height:50px;
  }
  .wrap{
    position: relative;
    height:100%;
    width: 100%;
    background-size: cover;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
